<template>
  <div>
    <!-- 当我们的 fllorItem 有 parent 的时候,就要递归的调用自己
    每次拿到 floorItem.parent 传进去,作为下一个楼层组件的 floorItem-->
    <floor
      v-if="floorItem.parent"
      :floorItem="floorItem.parent"
      :parentLength="parentLength-1"
      @reply="reply"
    />
    <div class="floorWrapper">
      <div class="meta">
        <div class="info">
          {{parentLength}}:{{floorItem.user.nickname}}
          <span class="tiem">2个小时前</span>
        </div>
        <div class="btnReply" @click="reply">回复</div>
      </div>
    </div>
    <div class="floorContent">{{floorItem.content}}</div>
  </div>
</template>

<script>
export default {
  name: "floor",
  props: ["floorItem", "parentLength"],
  methods: {
    reply(data) {
      if (data.id) {
        this.$emit("reply", data);
      } else {
        this.$emit("reply", {
          id: this.floorItem.id
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.floorWrapper {
  padding: 2.778vw;
  border: 1px solid #eee;
  background: #e4e4e4;
  .meta {
    display: block;
    justify-content: space-between;
    align-items: center;
    .tiem {
      font-size: 14px;
      color: #acacac;
    }
    .btnReply {
      font-size: 14px;
      color: #acacac;
    }
  }
  .floorContent {
    margin: 2.778vw 0;
  }
}
</style>